<template>
    <el-row class="main tl box box-tb">
        <el-col class="padd20 bgf mb10 box box-align-center box-pack-between">
            <el-page-header @back="$router.go(-1)" title="试卷" :content="name">
            </el-page-header>
            <el-button type="primary" class="pub-btn" @click="save">保存</el-button>
        </el-col>
        <el-col class="h100 box bottom">
            <el-col :span="5" class="num-list bgf mr10">
                <el-col class="tc mt10">
                    {{name}}
                </el-col>
                <el-col class="padd10">
                    <el-col :span="12">
                        {{`共${sumNumber}题，总计${sumScore}分`}}
                    </el-col>
                    <el-col :span="12" class="tr mb20">
                        <el-link :underline="false" @click="dialogVisible = true">批量设置分值</el-link>
                    </el-col>
                    <el-col class="line mt10"></el-col>
                </el-col>
                <el-col class="mt20 font-color">
                    <el-col class="box mb20">
                        <el-col :span="12" class="tc">单选题</el-col>
                        <el-col :span="12" class="tc">共{{radioNum}}题{{radioNum*setScore.radioValue}}分</el-col>
                    </el-col>
                    <el-col class="box mb20">
                        <el-col :span="12" class="tc">多选题</el-col>
                        <el-col :span="12" class="tc">共{{checkNum}}题{{checkNum*setScore.checkValue}}分</el-col>
                    </el-col>
                    <el-col class="box">
                        <el-col :span="12" class="tc">判断题</el-col>
                        <el-col :span="12" class="tc">共{{judgeNum}}题{{judgeNum*setScore.judgeValue}}分</el-col>
                    </el-col>
                </el-col>
                <el-col class="order box padd10 mt20">
                    <a href="javascript:void(0)" v-for="(item,index) in tabsList" :key="index"
                        :class="{ active: index === activeIndex }" @click="toContent(item, index)">{{index+1}}</a>
                </el-col>
            </el-col>
            <el-col :span="24" id="content" class="question-list bgf">
                <el-col v-if="tabsList.length !=0" style="padding-bottom: 60px;">
                    <div class="h130" v-for="(item, index) in tabsList" :key="index" :id="`content-item${index}`">
                        <radio-view :Index="index" ref="child" :Data="item" :options="options" :setScore="setScore"
                            @handleUpdate="handleUpdate(arguments,item)" @handleDeleteItem="handleDeleteItem"
                            v-if="item.type==1"></radio-view>
                        <check-view :Index="index" ref="child" :Data="item" :options="options" :setScore="setScore"
                            @handleUpdate="handleUpdate(arguments,item)" @handleDeleteItem="handleDeleteItem"
                            v-if="item.type==2"></check-view>
                        <judge-view :Index="index" ref="child" :Data="item" :options="options" :setScore="setScore"
                            @handleUpdate="handleUpdate(arguments,item)" @handleDeleteItem="handleDeleteItem"
                            v-if="item.type==3"></judge-view>
                    </div>
                </el-col>
                <el-empty description="暂无题目" v-else style="height: calc(100% - 60px);"></el-empty>
                <el-col class="fixed box box-align-center box-pack-start">
                    <el-popover placement="top-start" title=" " width="100" trigger="hover" class="mr20">
                        <el-button slot="reference" type="primary" class="pub-btn">添加題目</el-button>
                        <div class="box box-tb box-align-center box-pack-center">
                            <div class="item" @click="handleAddRadio">单选</div>
                            <div class="item" @click="handleAddCheck">多选</div>
                            <div class="item" @click="handleAddJudge">判断</div>
                        </div>
                    </el-popover>
                    <el-popover placement="top-start" title=" " width="100" trigger="hover">
                        <el-link slot="reference" :underline="false">从题库选择</el-link>
                        <div class="box box-tb box-align-center box-pack-center">
                            <div class="item">随机选题</div>
                            <div class="item" @click="handleAddQuestion()">手动选题</div>
                        </div>
                    </el-popover>
                </el-col>

            </el-col>
        </el-col>
        <!-- 批量设置分值 -->
        <el-dialog :visible.sync="dialogVisible" width="600px" class="exam">
            <div slot="title" class="dialog-title">
                <div class="box box-align-center box-pack-start">
                    <i class="tips"></i>
                    <span>批量设置分值</span>
                </div>
            </div>
            <el-col>
                <el-col class="box box-align-center box-pack-between mb10">
                    <el-col :span="8" class="tc">单选</el-col>
                    <el-col :span="8" class="tc">共{{radioNum}}题</el-col>
                    <el-col :span="8">
                        每题
                        <el-input v-model="setScore.radioValue"
                            @input.native="setScore.radioValue = setScore.radioValue.replace(/[^\d]/g,'')" maxlength="2"
                            size="mini" style="width:50px;margin: 0 10px;" />
                        分
                    </el-col>
                </el-col>
                <el-col class="box box-align-center box-pack-between mb10">
                    <el-col :span="8" class="tc">多选</el-col>
                    <el-col :span="8" class="tc">共{{checkNum}}题</el-col>
                    <el-col :span="8">
                        每题
                        <el-input v-model="setScore.checkValue"
                            @input.native="setScore.checkValue = setScore.checkValue.replace(/[^\d]/g,'')" maxlength="2"
                            size="mini" style="width:50px;margin: 0 10px;" />
                        分
                    </el-col>
                </el-col>
                <el-col class="box box-align-center box-pack-between mb10">
                    <el-col :span="8" class="tc">判断题</el-col>
                    <el-col :span="8" class="tc">共{{judgeNum}}题</el-col>
                    <el-col :span="8">
                        每题
                        <el-input v-model="setScore.judgeValue"
                            @input.native="setScore.judgeValue = setScore.judgeValue.replace(/[^\d]/g,'')" maxlength="2"
                            size="mini" style="width:50px;margin: 0 10px;" />
                        分
                    </el-col>
                </el-col>
            </el-col>
            <span slot="footer" class="dialog-footer">
                <el-button type="text" @click="dialogVisible = false" class="return-btn">取消</el-button>
                <el-button type="primary" @click="handleSetSonScore()" class="pub-btn">确定</el-button>
            </span>
        </el-dialog>
        <!-- 手动选题  -->
        <el-dialog :visible.sync="addShow" width="75%" class="exam">
            <div slot="title" class="dialog-title">
                <div class="box box-align-center box-pack-start">
                    <i class="tips"></i>
                    <span>手动选题</span>
                </div>
            </div>
            <el-row :gutter="20" class="dia-height">
                <el-col :span="5" style="overflow: hidden;padding-top: 10px;">
                    <el-tree :data="options" :props="defaultProps" :default-expand-all="true"
                        @node-click="handleNodeClick">
                        <span class="span-ellipsis" slot-scope="{ node, data }">
                            <el-tooltip class="item" effect="light" :content="node.label||''" placement="top-start">
                                <span>{{ node.label }}</span>
                            </el-tooltip>
                        </span>
                    </el-tree>
                </el-col>
                <el-col :span="19">
                    <el-table ref="multipleTable" :data="tableData" height="550" tooltip-effect="dark"
                        style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" label="全选">
                        </el-table-column>
                        <el-table-column label="全选">
                            <template slot-scope="scope">
                                <div v-html="scope.row.info"></div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button type="text" @click="addShow = false" class="return-btn">暂不添加</el-button>
                <el-button type="primary" @click="handleConfirm()" class="pub-btn">确认添加</el-button>
            </span>
        </el-dialog>
    </el-row>
</template>

<script>
    import radioView from './components/radio.vue';
    import checkView from './components/check.vue';
    import judgeView from './components/judge.vue';
    export default {
        components: {
            radioView,
            checkView,
            judgeView
        },
        data() {
            return {
                schoolid: this.$store.state.schoolId,
                name: '',
                cousid: null,
                stageid: null,
                examid: null,
                dialogVisible: false,
                addShow: false,
                tabsList: [],
                activeIndex: 0,
                contentLocation: [],
                setScore: {
                    radioValue: 0,
                    checkValue: 0,
                    judgeValue: 0
                },
                editData: {},
                options: [],
                type: 1,
                timelong: 90,
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                tableData: [],
                multipleSelection: []
                // radioScore:0,
                // checkScore:0,
                // judgeScore:0
            };
        },
        created() {
            // this.setEditor()
            // 调接口 获取页面内容
            // 例如
            // this.getCourseCasesDetail()
            // this.getCourseData()
            this.$nextTick(() => {
                // 在获取页面内容之后调用这个方法
                this.handleLocation() // 获取link位置
            })
        },
        computed: {
            //计算总分
            sumScore: function() {
                let sum_score =  this.radioNum*this.setScore.radioValue + this.checkNum*this.setScore.checkValue + this.judgeNum*this.setScore.judgeValue
                return sum_score
            },
            //计算题数
            sumNumber: function() {
                return this.tabsList.length
            },
            //计算单选num
            radioNum: function() {
                let num = 0
                this.tabsList.forEach(res => {
                    if (res.type == 1) {
                        num++
                    }
                })
                return num
            },
            //计算单选score
            radioScore: function() {
                let score = 0
                this.tabsList.forEach(res => {
                    if (res.type == 1) {
                        score = res.score
                    }
                })
                return score
            },
            //计算多选num
            checkNum: function() {
                let num = 0
                this.tabsList.forEach(res => {
                    if (res.type == 2) {
                        num++
                    }
                })
                return num
            },
            //计算多选score
            checkScore: function() {
                let score = 0
                this.tabsList.forEach(res => {
                    if (res.type == 2) {
                        score += res.score
                    }
                })
                return score
            },
            //计算判断num
            judgeNum: function() {
                let num = 0
                this.tabsList.forEach(res => {
                    if (res.type == 3) {
                        num++
                    }
                })
                return num
            },
            //计算判断score
            judgeScore: function() {
                let score = 0
                this.tabsList.forEach(res => {
                    if (res.type == 3) {
                        score += res.score
                    }
                })
                return score
            },
        },
        mounted() {
            this.setData()
            this.getExamDesc()
            console.log(JSON.parse(this.$route.query.data));
            // this.setEditor()
            // 监听滚动事件
            this.editorReset()
            this.$nextTick(function() {
                this.addScrollFun()
            })
        },
        methods: {
            editorReset() {
                this.$nextTick(function() {
                    this.tabsList.forEach((ele, index) => {
                        this.$refs.child[index].setEditor()
                        this.$refs.child[index].setData()
                    })
                })
            },
            setData() {
                let a = JSON.parse(this.$route.query.data)
                this.examid = a.id;


                // this.editData = JSON.parse(this.$route.query.data)
                // let a = JSON.parse(this.$route.query.data)
                // this.examid = a.id;
                // this.name = a.name;
                // this.setScore = {
                //     radioValue: a.danxuanscore != null ? a.danxuanscore : 0,
                //     checkValue: a.duoxuanscore != null ? a.duoxuanscore : 0,
                //     judgeValue: a.duoxuanscore != null ? a.duoxuanscore : 0
                // };
                // this.cousid = a.cousid;
                // this.examid = a.id;
                // this.type = a.type;
                // if (a.type == 1) {
                //     this.stageid = a.stageid;
                // }

            },
            getData() {
                let arr = [{
                    title: '',
                    item: [],
                    isAnswer: 0,

                }]
                let url = '/tongji/index';
                let params = {
                    schoolid: this.schoolid
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    this.$nextTick(() => {
                        // 在获取页面内容之后调用这个方法
                        this.handleLocation() // 获取link位置
                    })
                })
            },
            getExamDesc() {
                let url = '/yexam/desc';
                let params = {
                    examid: this.examid
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        let a = res.exam
                        this.name = a.name;
                        // this.radioScore = a.danxuanscore != null ? a.danxuanscore : 0;
                        // this.checkScore = a.duoxuanscore != null ? a.duoxuanscore : 0;
                        // this.judgeScore = a.panduanscore != null ? a.panduanscore : 0;
                        this.setScore = {
                            radioValue: a.danxuanscore != null ? a.danxuanscore : 0,
                            checkValue: a.duoxuanscore != null ? a.duoxuanscore : 0,
                            judgeValue: a.panduanscore != null ? a.panduanscore : 0
                        };
                        this.cousid = a.cousid;
                        this.examid = a.id;
                        this.type = a.type;
                        if (a.type == 1) {
                            this.stageid = a.stageid;
                        }
                        console.log(this.setScore);
                        this.tabsList = res.list
                        this.editorReset()
                        this.getCourseData()
                    }
                })
            },
            getCourseData() {
                console.log(this.type);
                let url = '/ycous/getcouslist';
                let params = {
                    schoolid: this.schoolid,
                    type: this.type,
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        // this.options =
                        // res.list.map(r=>{console.log(r);})
                        let arr = [];
                        res.list.forEach((item, index) => {
                            let object = {
                                value: item.id,
                                label: item.name
                            }
                            arr.push(object)
                            if (this.type == 1) {
                                object.children = []
                                item.stages.forEach((a, i) => {
                                    let itemObject = {
                                        value: a.id,
                                        label: a.title,
                                    }
                                    arr[index].children.push(itemObject)
                                })
                            }

                        })
                        console.log(arr);
                        this.options = arr
                    }
                })
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(val);
            },
            handleUpdate(e, item) {
                // console.log(e,item);
                let art = item;
                art.score = parseInt(e[0])
                this.$set(this.tabsList, e[1], art)
                // console.log(this.tabsList);
            },
            //设置子组件分值
            handleSetSonScore() {
                this.dialogVisible = false;
                this.tabsList.forEach((ele, index) => {
                    this.$refs.child[index].handleSetScore();
                })
            },
            //删除某项
            handleDeleteItem(index) {
                console.log(index);
                this.tabsList.splice(index, 1)
                console.log(this.tabsList);
                this.$nextTick(function() {
                    this.tabsList.forEach((ele, index) => {
                        // this.$refs.child[index].setEditor()
                        this.$refs.child[index].setData()
                    })
                })
            },
            //获取选项数据
            getSonData() {
                let data = []
                data = this.tabsList.map((ele, index) => {
                    return this.$refs.child[index].getData()
                })
                return data

            },
            //保存多个
            save() {
                console.log(this.getSonData());
                let url = '/yexam/zujuan';
                let params = {
                    subjects: this.getSonData()
                };
                let str;
                if (this.type == 1) {

                    //测验
                    str = {
                        jsonarr: JSON.stringify(params),
                        examid: this.examid,
                        cousid: this.cousid,
                        stageid: this.stageid,
                        name: this.name,
                        danxuanscore: parseInt(this.setScore.radioValue),
                        duoxuanscore: parseInt(this.setScore.checkValue),
                        panduanscore: parseInt(this.setScore.judgeValue),
                        timelong: this.timelong
                    };
                } else {
                    //考试
                    str = {
                        jsonarr: JSON.stringify(params),
                        examid: this.examid,
                        cousid: this.cousid,
                        name: this.name,
                        danxuanscore: parseInt(this.setScore.radioValue),
                        duoxuanscore: parseInt(this.setScore.checkValue),
                        panduanscore: parseInt(this.setScore.judgeValue),
                        timelong: this.timelong
                    };
                }
                console.log(str);
                // return
                this.$ajax.post(url, str).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.$message({
                            message: '添加成功',
                            type: 'success',
                            duration: 1500,
                            onClose: res => {
                                this.$router.go(-1)
                            }
                        });

                    }
                })
            },
            // 左侧link点击右侧内容滑动
            toContent(item, index) {
                this.$nextTick(() => {
                    this.removeScrollFun()
                    this.activeIndex = index
                    // console.log(this.activeIndex);
                    // console.log(document.querySelector(`#content-item${index}`).offsetTop);
                    document.querySelector('#content').scroll({
                        top: document.querySelector(`#content-item${index}`).offsetTop,
                        // behavior: 'smooth',
                        behavior: 'auto',
                        inline: "nearest",
                        block: "center",
                    })

                    // var id = "#content-item" + index;
                    // console.log(id);
                    // document.querySelector(id).scrollIntoView({
                    //     behavior: "smooth",
                    //     block: "center",
                    //     inline: "nearest",
                    // });
                    this.addScrollFun()
                })
            },

            addScrollFun() {
                document
                    .querySelector('#content')
                    .addEventListener('scroll', this.listenScroll)
            },

            removeScrollFun() {
                document
                    .querySelector('#content')
                    .removeEventListener('scroll', this.listenScroll)
            },

            // 内容部分滚动事件
            listenScroll(e) {
                // console.log(e.target.scrollTop);
                this.contentLocation.forEach((el, index) => {
                    // 当前滚动高度大于等于link高度 （这个34是我菜单栏每个的高度  可以根据自己的实际情况设置）
                    if (e.target.scrollTop >= el) {
                        this.activeIndex = index
                    }
                })
            },

            // 在获取页面内容之后调用这个方法 内容部分标题相对于顶部的位置--用来左右滚动联动
            handleLocation() {
                this.contentLocation = []
                if (Array.isArray(this.tabsList)) {
                    this.tabsList.forEach((ele, index) => {
                        this.contentLocation.push(
                            document.querySelector(`#content-item${index}`).offsetTop
                        )
                    })
                }
            },
            //自动定位
            scroolView() {
                this.$nextTick(function() {
                    var container = this.$el.querySelector("#content");
                    container.scrollTop = container.scrollHeight
                    this.handleLocation()
                })
            },
            //增加单选
            handleAddRadio() {
                let item = {
                    type: 1,
                    score: 3
                };
                this.tabsList.push(item)
                if (this.tabsList.length == 0) {
                    this.$nextTick(function() {
                        this.$refs.child[0].setEditor()
                    })
                } else {
                    this.$nextTick(function() {
                        this.$refs.child[this.tabsList.length - 1].setEditor()
                    })
                }
                this.scroolView()
            },
            //增加多选
            handleAddCheck() {

                let item = {
                    type: 2,
                    score: 3
                };
                this.tabsList.push(item)
                if (this.tabsList.length == 0) {
                    this.$nextTick(function() {
                        this.$refs.child[0].setEditor()
                    })
                } else {
                    this.$nextTick(function() {
                        this.$refs.child[this.tabsList.length - 1].setEditor()
                    })
                }
                this.scroolView()
            },
            //增加判断
            handleAddJudge() {
                let item = {
                    type: 3,
                    score: 3
                };
                this.tabsList.push(item)
                if (this.tabsList.length == 0) {
                    this.$nextTick(function() {
                        this.$refs.child[0].setEditor()
                    })
                } else {
                    this.$nextTick(function() {
                        this.$refs.child[this.tabsList.length - 1].setEditor()
                    })
                }
                this.scroolView()
            },
            handleAddQuestion() {
                this.addShow = true
                this.getNodeData(this.cousid)
            },
            handleConfirm() {
                this.addShow = false
                // console.log(this.multipleSelection);

                // console.log(this.tabsList);
                if (this.tabsList.length != 0) {
                    // console.log('有数据');
                    // this.tabsList.concat(this.multipleSelection)
                    for (let i in this.multipleSelection) {
                        this.tabsList.push(this.multipleSelection[i])
                    }
                    this.$nextTick(res => {
                        // console.log(this.tabsList);
                        this.tabsList.forEach((ele, index) => {
                            // console.log(index);
                            let a = this.tabsList.length;
                            let b = this.multipleSelection.length;
                            // console.log(a, b, a - b, (a - b) - 1 >= index);
                            if ((a - b) - 1 < index) {

                                this.$refs.child[index].setEditor()
                                this.$refs.child[index].setData()
                            }
                        })
                    })
                } else {
                    // console.log('无数据');
                    this.tabsList = this.multipleSelection
                    this.$nextTick(res => {
                        this.tabsList.forEach((ele, index) => {
                            this.$refs.child[index].setEditor()
                            this.$refs.child[index].setData()
                        })
                    })
                }


            },
            handleNodeClick(data) {
                console.log(data.value);
                this.getNodeData(data.value)
            },
            getNodeData(id) {
                let url = '/ysubject/getsubjectdata';
                let params = {
                    schoolid: this.schoolid,
                    cousid: id
                };
                this.$ajax.post(url, params).then(res => {
                    console.log(res);
                    if (res.code == 0) {
                        this.tableData = res.list.map(r => {
                            let str = r;
                            str.items = {
                                subjectid: null,
                                num: null,
                                opt: "",
                                cont: "​"
                            };
                            str.ref=1;
                            console.log(str);
                            return str
                        })
                    }
                })
            },
        }
    }
</script>


<style scoped lang="scss">
    .bgf {
        background-color: #fff;
    }

    .main {
        box-sizing: border-box;
        height: 100%;
    }

    .num-list {
        height: 100%;

        .line {
            height: 1px;
            background: #D6DBE7;
        }

        .font-color {
            color: #2F3142;
            font-size: 18px;
        }


    }

    .h130 {
        box-sizing: border-box;
        height: auto;
        overflow: hidden;
    }

    .bottom {
        overflow-y: auto;
    }

    .order {
        flex-wrap: wrap;

        a {
            margin: 5px;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border: 1px solid #DEE5EC;
            border-radius: 3px;

            &:active {
                color: #fff;
                background-color: #626BF1;
            }

            &.active {
                color: #fff;
                background-color: #626BF1;
            }
        }

    }

    .question-list {
        position: relative;
        box-sizing: border-box;
        overflow-y: auto;
        height: 100%;

        .fixed {
            // position: -webkit-sticky;
            // position: sticky;
            position: fixed;
            padding: 0 20px;
            bottom: 0px;
            height: 60px;
            background-color: #fff;
            z-index: 100;
            border-top: 1px solid #d6dbe7;
        }
    }

    /deep/ .el-link.el-link--default:hover,
    .el-link.el-link--default {
        color: #6473F9;
    }

    .pub-btn {
        padding: 0;
        width: 126px;
        height: 36px;
        line-height: 36px;
        background: #565DFF;
        border-color: #565DFF;
        border-radius: 7px;

        &:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary.is-active,
        .el-button--primary:active {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary:focus,
        .el-button--primary:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }
    }

    .item {
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        cursor: pointer;

        &:hover {
            color: #4852EC;
            background-color: #F0F3F8;
        }
    }

    /deep/ .el-form .el-form-item:last-child {
        margin-bottom: 0;
    }

    .return-btn {
        color: #ABB0C4;

        &:hover {
            color: #000;
        }
    }


    .tips {
        margin-right: 5px;
        width: 4px;
        height: 18px;
        background: #626BF1;
        border-radius: 2px;
    }

    .pub-btn {
        padding: 0;
        width: 126px;
        height: 36px;
        line-height: 36px;
        background: #565DFF;
        border-color: #565DFF;
        border-radius: 7px;

        &:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary.is-active,
        .el-button--primary:active {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }

        &.el-button--primary:focus,
        .el-button--primary:hover {
            background: rgba(86, 93, 255, .8);
            border-color: rgba(86, 93, 255, .8);
        }
    }

    .dia-height {
        height: 550px;
        overflow-y: auto;
    }

    /deep/ .el-table-column--selection .cell {
        padding: 0 10px !important;
    }

    /deep/ .span-ellipsis {
        display: block;
        width: 100%;
    }

    /deep/ .el-tooltip {
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
